 /*************************************

Template Name: PRIDE - Personal Portfolio Template
Author: perfect_coders
Version: 1.0
Design and Developed by: perfect_coders

NOTE: This is main stylesheet of the template.

****************************************/
 /*================================================
            Table of contents  
==================================================
 
00. base css
01. preloader
02. section title and padding
03. intro section
04. about section
05. service section
06. quotes area
07. portfolio section
08. review section
09. contact section
10. footer section

====================================================
            End table content 
===================================================*/
 
 @import url('https://fonts.cat.net/css?family=Source+Sans+Pro:400,600,700,900');
 .main-menu ul.navbar-nav li.active a.theme-color {
     color: #44b272;
 }
 
 .main-menu ul.navbar-nav li:hover a.theme-color {
     color: #44b272;
 }
 
 .welcome-text h1 span.theme-color {
     color: #44b272;
 }
 
 .banner-icon.theme-color {
     color: #44b272;
 }
 
 .btn.theme-color,
 a.btn.theme-color {
     background: #44b272;
     color: #fff;
 }
 
 .social-icon.theme-color a:hover {
     background: #44b272;
     color: #fff;
 }
 
 .section-title h2 span.theme-color {
     color: #44b272;
 }
 
 .review-list .owl-dots div.active {
     background: #44b272;
 }
 /*========================
    DEMO PANEL CSS
=========================*/
 
 .demo_panel_box {
     position: fixed;
     width: 180px;
     height: 140px;
     background: #e6e6e6;
     left: -180px;
     top: 180px;
     text-align: center;
     z-index: 99;
 }
 
 .color_panel_box {
     margin-top: 20px;
     padding: 0 12px;
 }
 
 .spiner_button {
     height: 50px;
     width: 50px;
     background: #44b272;
     position: absolute;
     display: block;
     right: -50px;
     ;
     top: 0px;
     z-index: 99;
     text-align: center;
     font-size: 30px;
     color: #fff;
     padding-top: 5px;
     cursor: pointer;
     border-radius: 0 10px 10px 0;
 }
 
 .color_panel_box span {
     width: 30px;
     height: 30px;
     margin-left: 15px;
     display: block;
     border-radius: 50%;
     float: left;
     margin-bottom: 15px;
     cursor: pointer;
 }
 
 .color_panel_box span.red_color {
     background-color: #DC143C;
 }
 
 .color_panel_box span.blue_color {
     background-color: #4183D7;
 }
 
 .color_panel_box span.yellow_color {
     background-color: #ffd505;
 }
 
 .color_panel_box span.purple_color {
     background-color: #663399;
 }
 
 .color_panel_box span.pink_color {
     background-color: #D2527F;
 }
 
 .color_panel_box span.green_color {
     background-color: #44b272;
 }
 /*======= yellow =========*/
 
 .yellow_color_theme .main-menu ul.navbar-nav li.active a.theme-color {
     color: #ffd505;
 }
 
 .yellow_color_theme .main-menu ul.navbar-nav li:hover a.theme-color {
     color: #ffd505;
 }
 
 .yellow_color_theme .welcome-text h1 span.theme-color {
     color: #ffd505;
 }
 
 .yellow_color_theme .banner-icon.theme-color {
     color: #ffd505;
 }
 
 .yellow_color_theme .btn.theme-color,
 .yellow_color_theme a.btn.theme-color {
     background: #ffd505;
 }
 
 .yellow_color_theme .social-icon.theme-color a:hover {
     background: #ffd505;
     color: #fff;
 }
 
 .yellow_color_theme .section-title h2 span.theme-color {
     color: #ffd505;
 }
 
 .yellow_color_theme .review-list .owl-dots div.active {
     background: #ffd505;
 }
 /*======= end yellow =========*/
 /*=========== red ===========*/
 
 .red_color_theme .main-menu ul.navbar-nav li.active a.theme-color {
     color: #DC143C;
 }
 
 .red_color_theme .main-menu ul.navbar-nav li:hover a.theme-color {
     color: #DC143C;
 }
 
 .red_color_theme .welcome-text h1 span.theme-color {
     color: #DC143C;
 }
 
 .red_color_theme .banner-icon.theme-color {
     color: #DC143C;
 }
 
 .red_color_theme .btn.theme-color,
 .red_color_theme a.btn.theme-color {
     background: #DC143C;
     color: #fff;
 }
 
 .red_color_theme .social-icon.theme-color a:hover {
     background: #DC143C;
     color: #fff;
 }
 
 .red_color_theme .section-title h2 span.theme-color {
     color: #DC143C;
 }
 
 .red_color_theme .review-list .owl-dots div.active {
     background: #DC143C;
 }
 /*=========== end red ===========*/
 /*=========== green ===========*/
 
 .green_color_theme .main-menu ul.navbar-nav li.active a.theme-color {
     color: #44b272;
 }
 
 .green_color_theme .main-menu ul.navbar-nav li:hover a.theme-color {
     color: #44b272;
 }
 
 .green_color_theme .welcome-text h1 span.theme-color {
     color: #44b272;
 }
 
 .green_color_theme .banner-icon.theme-color {
     color: #44b272;
 }
 
 .green_color_theme .btn.theme-color,
 .green_color_theme a.btn.theme-color {
     background: #44b272;
     color: #fff;
 }
 
 .green_color_theme .social-icon.theme-color a:hover {
     background: #44b272;
     color: #fff;
 }
 
 .green_color_theme .section-title h2 span.theme-color {
     color: #44b272;
 }
 
 .green_color_theme .review-list .owl-dots div.active {
     background: #44b272;
 }
 /*=========== end green ===========*/
 /*=========== pink ===========*/
 
 .pink_color_theme .main-menu ul.navbar-nav li.active a.theme-color {
     color: #D2527F;
 }
 
 .pink_color_theme .main-menu ul.navbar-nav li:hover a.theme-color {
     color: #D2527F;
 }
 
 .pink_color_theme .welcome-text h1 span.theme-color {
     color: #D2527F;
 }
 
 .pink_color_theme .banner-icon.theme-color {
     color: #D2527F;
 }
 
 .pink_color_theme .btn.theme-color,
 .pink_color_theme a.btn.theme-color {
     background: #D2527F;
 }
 
 .pink_color_theme .social-icon.theme-color a:hover {
     background: #D2527F;
     color: #fff;
 }
 
 .pink_color_theme .section-title h2 span.theme-color {
     color: #D2527F;
 }
 
 .pink_color_theme .review-list .owl-dots div.active {
     background: #D2527F;
 }
 /*=========== end pink ===========*/
 /*=========== purple ===========*/
 
 .purple_color_theme .main-menu ul.navbar-nav li.active a.theme-color {
     color: #663399;
 }
 
 .purple_color_theme .main-menu ul.navbar-nav li:hover a.theme-color {
     color: #663399;
 }
 
 .purple_color_theme .welcome-text h1 span.theme-color {
     color: #663399;
 }
 
 .purple_color_theme .banner-icon.theme-color {
     color: #663399;
 }
 
 .purple_color_theme .btn.theme-color,
 .purple_color_theme a.btn.theme-color {
     background: #663399;
     color: #fff;
 }
 
 .purple_color_theme .social-icon.theme-color a:hover {
     background: #663399;
     color: #fff;
 }
 
 .purple_color_theme .section-title h2 span.theme-color {
     color: #663399;
 }
 
 .purple_color_theme .review-list .owl-dots div.active {
     background: #663399;
 }
 /*=========== end purple ===========*/
 /*=========== blue ===========*/
 
 .blue_color_theme .main-menu ul.navbar-nav li.active a.theme-color {
     color: #4183D7;
 }
 
 .blue_color_theme .main-menu ul.navbar-nav li:hover a.theme-color {
     color: #4183D7;
 }
 
 .blue_color_theme .welcome-text h1 span.theme-color {
     color: #4183D7;
 }
 
 .blue_color_theme .banner-icon.theme-color {
     color: #4183D7;
 }
 
 .blue_color_theme .btn.theme-color,
 .blue_color_theme a.btn.theme-color {
     background: #4183D7;
     color: #fff;
 }
 
 .blue_color_theme .social-icon.theme-color a:hover {
     background: #4183D7;
     color: #fff;
 }
 
 .blue_color_theme .section-title h2 span.theme-color {
     color: #4183D7;
 }
 
 .blue_color_theme .review-list .owl-dots div.active {
     background: #4183D7;
 }
 /*=========== end red ===========*/
 /*================================================
    00. base css
==================================================*/
 
 . a:focus {
     outline: 0 solid
 }
 
 img {
     max-width: 100%;
     height: auto;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     margin: 0 0 15px;
     font-weight: 700;
     color: #000;
     letter-spacing: 2px;
 }
 
 p {
     color: #666;
 }
 
 html,
 body {
     height: 100%
 }
 
 body {
     font-family: 'Source Sans Pro', sans-serif;
     font-weight: 400;
     position: relative;
 }
 
 a:hover {
     text-decoration: none
 }
 /* Remove Chrome Input Field's Unwanted Yellow Background Color */
 
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus {
     -webkit-box-shadow: 0 0 0px 1000px white inset !important;
 }
 /*================================================
    01. preloader
==================================================*/
 
 .preloader {
     position: fixed;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     background-color: #fff;
     z-index: 9999999;
 }
 
 .preloader .spinner {
     left: 50%;
     margin-left: -20px;
     margin-top: -20px;
     position: absolute;
     top: 50%;
 }
 
 .spinner {
     width: 40px;
     height: 40px;
     position: relative;
     margin: 100px auto;
 }
 
 .double-bounce1,
 .double-bounce2 {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background-color: #333;
     opacity: 0.6;
     position: absolute;
     top: 0;
     left: 0;
     -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
     animation: sk-bounce 2.0s infinite ease-in-out;
 }
 
 .double-bounce2 {
     -webkit-animation-delay: -1.0s;
     animation-delay: -1.0s;
 }
 
 @-webkit-keyframes sk-bounce {
     0%,
     100% {
         -webkit-transform: scale(0.0)
     }
     50% {
         -webkit-transform: scale(1.0)
     }
 }
 
 @keyframes sk-bounce {
     0%,
     100% {
         transform: scale(0.0);
         -webkit-transform: scale(0.0);
     }
     50% {
         transform: scale(1.0);
         -webkit-transform: scale(1.0);
     }
 }
 /*================================================
    02. section title and section padding
==================================================*/
 
 .section-title {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .section-title h2 {
     margin-top: 0;
     font-weight: 700;
     font-size: 42px;
     letter-spacing: 2px;
 }
 
 .section-title h2 span {
     display: block;
     font-size: 16px;
     font-style: italic;
     margin-bottom: 5px;
 }
 
 .section-padding {
     padding: 80px 0;
 }
 /*================================================
    03. intro section
==================================================*/
 
 .intro-section {
     height: 100%;
 }
 
 .welcome-area {
     position: relative;
     background: url(../images/intro-bg.jpg);
     /*** intro-section background image ***/
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
     height: 100%;
     z-index: 1;
 }
 
 .welcome-area:after {
     position: absolute;
     content: "";
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000;
     opacity: .7;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
     z-index: -1;
 }
 
 #particles-js {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
 }
 
 .welcome-table {
     display: table;
     width: 100%;
     height: 100%;
     text-align: center;
 }
 
 .welcome-cell {
     display: table-cell;
     vertical-align: middle;
 }
 
 .welcome-text {}
 
 .welcome-text h1 {
     font-size: 45px;
     color: #fff;
     font-weight: 900;
     line-height: 60px;
     letter-spacing: 10px;
     text-transform: uppercase;
 }
 
 .welcome-text h4 {
     color: #fff;
     margin: 15px 0;
     font-size: 18px;
     letter-spacing: 12px;
     font-weight: 600;
     text-transform: uppercase;
 }
 
 .welcome-text h1 span {}
 
 .banner-icon {
     position: absolute;
     left: 50%;
     margin-left: -25px;
     bottom: 30px;
     width: 50px;
     -webkit-animation: 3s ease 0s normal none infinite running bounce;
     animation: 3s ease 0s normal none infinite running bounce;
     font-size: 40px;
     opacity: 0.7;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
     text-align: center;
     -webkit-transition: all 0.4s ease 0s;
     transition: all 0.4s ease 0s;
 }
 
 a.banner-icon:focus {
     background: none;
     color: #fff;
 }
 /*** HEADER AREA ***/
 
 .custom-navbar {
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 99;
     padding: 10px 0;
     background: transparent;
     transition: all 0.4s ease;
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
 }
 
 .custom-navbar.top-nav-collapse {
     background: rgba(0, 0, 0, 0.75);
 }
 
 .logo a {
     display: inline-block;
     font-size: 18px;
     color: #fff;
     font-weight: 700;
     margin-top: 12px;
     text-align: center;
     letter-spacing: 4px;
 }
 
 .logo a:focus {
     text-decoration: none;
 }
 
 .main-menu {
     text-transform: uppercase;
 }
 
 .main-menu ul.navbar-nav {
     float: right;
 }
 
 .main-menu ul.navbar-nav li.active a {
     -webkit-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out;
 }
 
 .main-menu ul.navbar-nav li a {
     color: #fff;
     font-weight: 700;
     -webkit-transition: all 0.5s ease-in-out 0s;
     transition: all 0.5s ease-in-out 0s;
     font-size: 13px;
     letter-spacing: 1px;
 }
 
 .main-menu ul.navbar-nav li a:focus {
     background: none;
     outline: none;
 }
 
 .main-menu ul li:hover a {
     background: none;
 }
 /*================================================
    04. about section
==================================================*/
 
 .about-section {
     background: #f7f7f7;
 }
 
 .author-image {
     text-align: center;
 }
 
 .author-image img {}
 
 .social-icon {
     margin-top: 20px;
     margin-left: -5px;
     text-align: center;
 }
 
 .social-icon a {
     width: 32px;
     height: 32px;
     color: #fff;
     background: #000;
     display: inline-table;
     text-align: center;
     font-size: 12px;
     margin-left: 5px;
     margin-bottom: 15px;
 }
 
 .social-icon a i {
     display: table-cell;
     vertical-align: middle;
 }
 
 .social-icon a:hover {}
 
 .about-text {
     padding: 30px 0;
 }
 
 .about-text h3 {
     font-size: 32px;
     font-weight: 700;
 }
 
 .about-text p {
     font-size: 16px;
     line-height: 28px;
 }
 
 .btn,
 a.btn {
     cursor: pointer;
     font-size: 12px;
     font-weight: 700;
     height: 48px;
     letter-spacing: 0.2em;
     line-height: 48px;
     overflow: hidden;
     padding: 0 30px;
     text-align: center;
     text-transform: uppercase;
     -webkit-transition: all 0.4s ease 0s;
     transition: all 0.4s ease 0s;
     margin: 20px 20px 10px 0;
     color: #000;
     outline: none;
 }
 
 .btn.extra,
 a.btn.extra {
     background: #000;
     color: #fff;
 }
 
 .btn:focus,
 a.btn:focus {
     outline: none;
 }
 
 .btn:hover,
 a.btn:hover {
     opacity: 0.9;
 }
 
 .btn.extra:hover,
 a.btn.extra:hover {
     opacity: 0.9;
 }
 /*================================================
    05. service section
==================================================*/
 
 .services-section {}
 
 .single-services {
     color: #666;
 }
 
 .servise-icon {
     width: 100px;
     height: 100px;
     color: #000;
     font-size: 65px;
     margin: 0 auto;
     display: inline-table;
     text-align: center;
     margin-bottom: 20px;
     -webkit-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out;
 }
 
 .servise-icon i {
     display: table-cell;
     vertical-align: middle;
 }
 
 .single-services h4 {
     font-size: 18px;
     font-weight: 800;
     text-transform: uppercase;
     line-height: 28px;
 }
 
 .single-services p {
     font-size: 16px;
 }
 /*================================================
    06. quotes area
==================================================*/
 
 .quotes-area {
     background: #f7f7f7;
 }
 
 .quotes-content h3 {
     font-size: 42px;
     margin-bottom: 25px;
     font-size: 800;
 }
 
 .quotes-content p {}
 /*================================================
    07. portfolio section
==================================================*/
 
 .single-work {
     position: relative;
     margin-bottom: 30px;
 }
 
 .single-work a {
     position: relative;
     overflow: hidden;
     display: block;
     box-shadow: 0 7px 16px 0 rgba(50, 50, 50, 0.2);
 }
 
 .single-work a:focus {
     outline: 0;
 }
 
 .single-work img {
     width: 100%;
     height: auto;
     transition: all 0.5s ease-in-out;
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
 }
 
 .itemHover {
     position: absolute;
     top: 0;
     width: 100%;
     height: 100%;
     padding-right: 20px;
     background: rgba(0, 0, 0, 0.9);
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     transition: all 0.5s ease-in-out;
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
 }
 
 .single-work a:hover .itemHover {
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 }
 
 .single-work a:hover img {
     -webkit-transform: scale3d(1.1, 1.1, 1.1);
     transform: scale3d(1.1, 1.1, 1.1);
 }
 
 .work-table {
     display: table;
     width: 100%;
     height: 100%;
     text-align: center;
 }
 
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }
 
 .hover-content {}
 
 .hover-content i {
     color: #fff;
     padding-bottom: 15px;
     font-size: 65px;
     font-weight: 300;
     letter-spacing: 1px;
     text-align: center;
 }
 
 .hover-content h6 {
     color: #fff;
     font-size: 14px;
     font-weight: 300;
     letter-spacing: 1px;
 }
 /*================================================
    08. review section
==================================================*/
 
 .review-section {
     background: #f7f7f7;
 }
 
 .review-full-area {
     position: relative;
 }
 
 .review-full-area:before {
     font-family: FontAwesome;
     position: absolute;
     content: "\f10d";
     top: 0;
     left: 50%;
     margin-left: -30px;
     z-index: 3;
     font-size: 35px;
     color: #000;
 }
 
 .review-full-area .owl-carousel {
     text-align: center;
 }
 
 .single-review {
     padding: 50px 120px 10px;
 }
 
 .review-content {
     text-align: center;
 }
 
 .review-content p {
     font-size: 16px;
     color: #666;
     line-height: 28px;
 }
 
 h5.author {
     position: relative;
     font-size: 14px;
     color: #666;
     text-align: center;
 }
 
 .review-list .owl-dots {
     text-align: center;
 }
 
 .review-list .owl-dots div {
     background: #000;
     display: inline-block;
     height: 5px;
     margin-right: 6px;
     width: 14px;
     -webkit-transition: all .7s;
     transition: all .7s;
 }
 
 .review-list .owl-dots div.active {}
 /*================================================
    09. contact section
==================================================*/
 
 .contact-area {}
 
 .contact-form {
     position: relative;
 }
 
 .contact-form .form-group {
     margin-bottom: 20px;
 }
 
 .form-control {
     padding: 12px 2px;
     height: auto;
     box-shadow: none !important;
     border: none;
     border-bottom: solid 2px #000;
     border-radius: 0;
     background: transparent;
 }
 
 textarea.form-control {
     resize: vertical;
 }
 
 .form-control:focus {
     border-color: 0 solid;
 }
 
 .btn.disabled,
 .btn[disabled],
 fieldset[disabled] .btn {
     box-shadow: none;
     cursor: not-allowed;
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 }
 /*================================================
    10. footer section
==================================================*/
 
 .footer {
     background-color: #111;
     padding: 80px 0;
 }
 
 .footer-text {}
 
 .footer-text p {
     font-size: 16px;
     color: #fff;
     margin-bottom: 0px;
 }
 
 .footer-text p strong {
     letter-spacing: 1px;
 }